<template>
    <div id="bangzhuCont">
        <Head/>
        <el-row>
            <el-col :span="16" :xs="24">
                <Remenwenti/>
            </el-col>
            <el-col :span="8" class="hidden-xs-only">
                <Youceneironrg/>
            </el-col>
        </el-row>
        <div class="Goback hiddem-xs-only">
            <li class="hidden-sm-and-up yd-fanhui" :class="{'actives':index === isActives}" @click="changeTabs(index)">
                <router-link to="/yd-wode"><p><i class="el-icon-back"></i></p></router-link>
            </li>
        </div>
    </div>
</template>

<script>
    import Head from '../Head'
    import Remenwenti from './remenwenti'
    import Youceneironrg from './youceneirong'

    export default ({
        name: "bangzhuCont",
        methods: {
            changeTabs(index) {
                this.isActives = index;
            }
        },
        components: {
            Remenwenti,
            Youceneironrg,
            Head
        }
    })
</script>

<style scoped>
    #bangzhuCont {
        padding-top: 80px;
        width: 65%;
        margin: 0 auto;
    }

    .actives {
        background-color: #f0f0f0;
        color: #ff4f4c;
    }

    .Goback li {
        text-align: center;
        line-height: 50px;
        position: fixed;
        bottom: 30px;
        left: 30px;
        background-color: #b3b3b3;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        font-size: 35px;
        opacity: 0.5;
    }

    .Goback li i {
        color: #fff;
    }

    @media screen and (max-width: 750px) {
        #bangzhuCont {
            width: 90%;
        }
    }
</style>